import React from 'react'
import { Button, Space, Typography, Result } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom'
import { 
  HomeOutlined, 
  ReloadOutlined, 
  LeftOutlined,
  FileSearchOutlined 
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { addTab, setActiveTag } from '@/store/slices/menuSlice'

const { Text } = Typography

// 404页面组件 - 现代简洁设计
const NotFound: React.FC = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()

  // 返回仪表盘
  const handleGoHome = () => {
    dispatch(addTab({
      key: 'dashboard',
      title: '仪表盘',
      path: '/dashboard',
      closable: false,
      affix: true,
      component: 'Dashboard'
    }))
    dispatch(setActiveTag('dashboard'))
    navigate('/dashboard')
  }

  // 返回上一页
  const handleGoBack = () => {
    window.history.back()
  }

  // 刷新页面
  const handleRefresh = () => {
    window.location.reload()
  }

  // 获取当前访问的路径
  const currentPath = location.pathname || '未知路径'

  return (
    <div className="modern-404-container">
      <Result
        icon={<FileSearchOutlined style={{ color: '#1890ff' }} />}
        title="404"
        subTitle={
          <div className="error-subtitle">
            <Text>抱歉，您访问的页面不存在</Text>
            <br />
            <Text type="secondary" style={{ fontSize: '14px' }}>
              请求路径: <Text code>{currentPath}</Text>
            </Text>
          </div>
        }
        extra={
          <Space size="middle" wrap>
            <Button 
              type="primary" 
              icon={<HomeOutlined />}
              onClick={handleGoHome}
              size="large"
            >
              返回首页
            </Button>
            <Button 
              icon={<LeftOutlined />}
              onClick={handleGoBack}
              size="large"
            >
              返回上页
            </Button>
            <Button 
              icon={<ReloadOutlined />}
              onClick={handleRefresh}
              size="large"
            >
              刷新页面
            </Button>
          </Space>
        }
      />

      <style>{`
        .modern-404-container {
          height: calc(100vh - 172px);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fafafa;
          box-sizing: border-box;
        }

        .modern-404-container .ant-result {
          padding: 48px 32px;
          background: white;
          border-radius: 8px;
          height: 100%;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          width: 100%;
        }

        .modern-404-container .ant-result-title {
          font-size: 72px;
          font-weight: 600;
          color: #1890ff;
          margin-bottom: 16px;
        }

        .modern-404-container .ant-result-icon {
          margin-bottom: 24px;
        }

        .modern-404-container .ant-result-icon .anticon {
          font-size: 64px;
        }

        .error-subtitle {
          margin-bottom: 24px;
        }

        .modern-404-container .ant-result-extra {
          margin-top: 32px;
          display: flex; /* 使用 flex 布局以实现居中 */
          justify-content: center; /* 水平居中按钮组 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
          .modern-404-container {
            height: calc(100vh - 140px);
            padding: 16px;
          }

          .modern-404-container .ant-result {
            padding: 32px 24px;
          }

          .modern-404-container .ant-result-title {
            font-size: 56px;
          }

          .modern-404-container .ant-result-icon .anticon {
            font-size: 48px;
          }

          .modern-404-container .ant-btn {
            width: 100%;
            margin-bottom: 8px;
          }

          .modern-404-container .ant-space {
            width: 100%;
          }

          .modern-404-container .ant-space-item {
            width: 100%;
          }
        }

        @media (max-width: 480px) {
          .modern-404-container .ant-result {
            padding: 24px 16px;
          }

          .modern-404-container .ant-result-title {
            font-size: 48px;
          }

          .modern-404-container .ant-result-icon .anticon {
            font-size: 40px;
          }
        }
      `}</style>
    </div>
  )
}

export default NotFound